<!--
 * @Author: your name
 * @Date: 2021-07-20 23:44:59
 * @LastEditTime: 2021-07-21 14:25:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue\7.17\src\views\doc\Sterilization.vue
-->
<template>
  <div>
    <el-container>
      <div style="float: left;width: 25%;">
        <!--左边栏空白占位  -->
      </div>
      
    </el-container>

    <br>
    <div>
      <el-container >
        <div style="float: left;width: 10%;background-color: #DCDFE6;">
          <!--左边栏空白占位  -->
        </div>
        <div style="float: left;width: 80%;">
              <div class="card"  v-for="(item, index) in goodsList" :key="item.id" v-on:mouseenter="showDialog(index)" v-on:mouseleave="hideDialog()">
                  <div class="ribbon">
                    <!--鼠标移入移出事件-->
                    <div class="handleDialog" v-if="ishow && index==current">
                      <el-button type="success" style="margin-left:25%;margin-top: 70%;" size="medium" @click="doctorInfo(item)">查看详情</el-button>
                      <el-button type="warning" icon="el-icon-star-off" circle size="medium"></el-button>
                    </div>
                    <img :src="item.img" style="height: 100%;width: 100%">
                </div>
                <div style="text-align:center">
                  <span>{{item.name}}</span>
                  <span>{{item.desc}}</span>
                  <span>绝育收费：&yen;{{item.prize}}</span>
                </div>
              </div>
        </div>
        <div style="float: left;width: 10%;background-color: #DCDFE6;">
          <!--右边栏空白占位  -->
        </div>

      </el-container>
      <br>
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      name: "index",
      data() {
        return {
          ishow: false,
          current: 0,
          selectd: '',
          currentDate: new Date(),
          goodsList:[
            {id:1,name:"张医生", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"59.00",desc:"级别：二级"},
            {id:2,name:"王医生", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"79.00 ",desc:"级别：二级"},
            {id:3,name:"李专家", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"219.00",desc:"级别：一级"},
            {id:4,name:"胡专家", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"266.00",desc:"级别：一级"},
            {id:5,name:"罗大师", img:"http://img.yao51.com/jiankangtuku/hsaershtx.jpeg",prize:"888.00",desc:"级别：特级"},
            {id:6,name:"简大师", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"999.00",desc:"级别：特级"},
            {id:7,name:"龙教授", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"229.00",desc:"级别：三级"},
            {id:8,name:"杨医生", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"319.00",desc:"级别：二级"},
            {id:9,name:"双医生", img:"http://img.yunkucn.com/file/image/pic/1a1943019411n3895694750c26.jpg",prize:"269.00",desc:"级别：二级"},

          ]
        };
      },
      methods:{
        //前往商品详情页
        doctorInfo(goods) {
          this.$router.push({
            name:"doctorInfo",
            params:{
              goodsId: goods.id,
              goodsName: goods.name,
              goodsImg: goods.img,
              goodsPrice: goods.prize,
              goodsDesc: goods.desc,
            }
          });
        },
        //显示操作项
        showDialog(index) {
          this.ishow = true;
          this.current = index;
        },
        //隐藏蒙层
        hideDialog() {
          this.ishow = false;
          this.current = null;
        }
      }
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  /**
  隐藏页
  */
  .handleDialog {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
  }


  /**
  卡片
   */

  .card{
    height: 350px;
    width: 266px;
    margin-left: 30px;
    margin-top: 30px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
    float: left;
  }
  .card img {
    width: 100%;
    height: 70%;
  }
  .card span {
    font-size: 15px;
    color: #BFBFBF;
    display: block;
    letter-spacing: 2px;
  }
  .ribbon {
    display: inline-block;
    width: 100%;
    height: 70%;
    position: relative;
    margin-bottom: 30px;
    background-size: cover;
    text-transform: uppercase;
    color: white;
  }

  .wrap {
    width: 100%;
    height: 188px;
    position: absolute;
    top: -8px;
    left: 8px;
    overflow: hidden;
  }
  .wrap:before {
    content: "";
    display: block;
    border-radius: 8px 8px 0px 0px;
    width: 40px;
    height: 8px;
    position: absolute;
    right: 100px;
    background: #4D6530;
  }
  .wrap:after {
    content: "";
    display: block;
    border-radius: 0px 8px 8px 0px;
    width: 8px;
    height: 40px;
    position: absolute;
    right: 0px;
    top: 100px;
    background: #4D6530;
  }
  .ribbon6 {
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 40px;

    line-height: 40px;
    position: absolute;
    top: 30px;
    right: -50px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
    background: #57DD43;
  }
</style>